<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>弹出框</title>
    <link rel="stylesheet" href="css/base.css">
    <link rel="stylesheet" href="css/font/css/font-awesome.min.css">
    <link rel="stylesheet" href="css/activityDialog.css">
</head>
<body>
    <!--遮罩层-->
    <div class="dialogCover pf"></div>
    <!--兑换代金券-->
    <div class="exchangeCoupon dialog showPopup pf dn">
        <p class="del tar"><a href="javascript:void(0);"><i class="fa fa-close"></i></a></p>
        <div class="content tac">
            <h2 class="title feb">兑换代金券</h2>
            <div class="inputBox clearfix">
                <p class="fl text">输入兑换码</p>
                <input type="text" class="fl">
                <a class="db fl br5 confirm transition" href="javascript:void(0);">确认</a>
            </div>
            <p class="infos tal">
                使用方法：输入兑换码获得代金券后可免费观看
                <a class="getHelp" href="javascript:void(0);">如何获得？</a>
            </p>
            <div class="pr helpInfo tal">
                <span class="pa trigon"></span>
                <ol class="help">
                    <li>用户可通过实时关注平台合作的机构或者个人，观看直播或者公开课等；进行抽奖领取。</li>
                    <li>使用代金券兑换码预约公开课，平台额外赠送三张代金券。</li>
                    <li>三人拼团付费预约公开课，拼团成功之后，可免费领取一张代金券。</li>
                </ol>
            </div>
            <div class="couponList tal">
                <p class="text feb">已有代金券</p>
                <div class="coupon pr dn">
                    <span class="pa num br50 tac">1</span>
                    <div class="courseMsg tal">
                        <h3 class="courseTitle toe">《无间狱插画》</h3>
                        <p class="timeLimit">2018.4.30-2018.12.30</p>
                    </div>
                    <a class="db pa tac predict transition" href="javascript:void(0);">预约</a>
                </div>
                <div class="coupon pr dn">
                    <span class="pa num br50 tac">1</span>
                    <div class="courseMsg tal">
                        <h3 class="courseTitle toe">《无间狱插画》</h3>
                        <p class="timeLimit">2018.4.30-2018.12.30</p>
                    </div>
                    <a class="db pa tac predict transition" href="javascript:void(0);">预约</a>
                </div>
                <!--缺省提示-->
                <div class="emptyInfo tac">
                    <div class="icon"></div>
                    <p class="tips">您暂时还没有代金券哦~</p>
                </div>
            </div>
        </div>
    </div>
    <!--兑换并预约成功-->
    <div class="predictComplete dialog showPopup pf dn">
        <p class="del tar"><a href="javascript:void(0);"><i class="fa fa-close"></i></a></p>
        <div class="content tac">
            <div class="infos">
                <img src="img/activity/congratulation.png" alt="">
                <p class="text feb">恭喜你兑换并预约成功</p>
                <p class="tips">您额外获得了三张代金券</p>
            </div>
            <div class="coupon pr">
                <span class="num br50 tac pa">5</span>
                <div class="courseMsg tal">
                    <h3 class="courseTitle toe">《无间狱插画》</h3>
                    <p class="timeLimit">2018.4.30-2018.12.30</p>
                </div>
            </div>
            <div class="description tal">
                将本次直播代金券分享给三个好友，好友领取后，可获得<span class="courseTitle">《大狗熊毛发制作》</span>直播代金券一张。
            </div>
            <div class="shares">
                <p class="text feb">立即分享</p>
                <div class="shareWays">
                    <div class="bdsharebuttonbox share-ways-button" data-tag="share_1">
                        <a class="br50 bds_tsina" data-cmd="tsina"></a>
                        <a class="br50 bds_weixin" data-cmd="weixin"></a>
                        <a class="br50 bds_sqq" data-cmd="sqq"></a>
                        <a class="br50 bds_qzone" data-cmd="qzone"  style="margin-right:0;"></a>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!--支持进度 - 用户视角 -->
    <div class="checkFollower dialog showPopup pf d n">
        <p class="del tar"><a href="javascript:void(0);"><i class="fa fa-close"></i></a></p>
        <div class="content tac">
            <!--居中的个人信息-->
            <div class="workerMsg">
                <div class="workerPic br50">
                    <img class="br50" src="http://img.yxs.shenyecg.com/Image/aXMbJlXEirUtlp1lBi4t1Hw4K8G6mEly/15108239746754057.gif" alt="">
                </div>
                <p class="nickName toe feb">路人甲</p>
                <p class="description tal">
                    我是<span class="nickName">路人甲</span>，我正在预约<span class="courseTitle">《无间狱插画》</span>中文教程直播课，需要三人支持我，分享给朋友支持你
                </p>
            </div>
            <div class="progressBox">
                <div class="userPicBox pr">
                    <div class="num1 userPic br50 pa">
                        <img class="br50" src="http://img.yxs.shenyecg.com/Image/XsYAuXoIGlEWkkruNBagDcopsdFbkVSm/233.jpg" alt="">
                    </div>
                    <div class="num2 userPic br50 pa">
                        <img class="br50" src="http://img.yxs.shenyecg.com/Image/XsYAuXoIGlEWkkruNBagDcopsdFbkVSm/233.jpg" alt="">
                    </div>
                    <div class="num3 userPic br50 pa dn">
                        <img class="br50" src="http://img.yxs.shenyecg.com/Image/XsYAuXoIGlEWkkruNBagDcopsdFbkVSm/233.jpg" alt="">
                    </div>
                </div>
                <div class="progress pr br5">
                    <p class="record pa br5"></p>
                    <span class="circle num1 br50 pa active"></span>
                    <span class="circle num2 br50 pa active"></span>
                    <span class="circle num3 br50 pa"></span>
                </div>
                <div class="btns">
                    <a class="dib br5 transition support" href="javascript:void(0);">支持</a>
                    <a class="dib br5 transition join active" href="javascript:void(0);">我也参加</a>
                </div>
                <p class="text">继续转发，分享三人，免费听课。</p>
            </div>
            <div class="follower tal">
                <p class="text">支持Ta的人</p>
                <div class="emptyInfo tac dn">暂无人支持Ta</div>
                <div class="followerList clearfix">
                    <a class="dib fl" href="javascript:void(0);">
                        <img class="br50" src="http://img.yxs.shenyecg.com/Image/XsYAuXoIGlEWkkruNBagDcopsdFbkVSm/233.jpg" alt="">
                        <p class="nickName toe">路人甲</p>
                    </a>
                    <a class="dib fl" href="javascript:void(0);">
                        <img class="br50" src="http://img.yxs.shenyecg.com/Image/aXMbJlXEirUtlp1lBi4t1Hw4K8G6mEly/15108239746754057.gif" alt="">
                        <p class="nickName toe">路人甲</p>
                    </a>
                </div>
            </div>
        </div>
    </div>
    <!--支持进度 - 作者视角 -->
    <div class="checkSupporter dialog showPopup pf dn">
        <p class="del tar"><a href="javascript:void(0);"><i class="fa fa-close"></i></a></p>
        <div class="content tac">
            <!--居中的个人信息-->
            <div class="workerMsg">
                <div class="workerPic br50">
                    <img class="br50" src="http://img.yxs.shenyecg.com/Image/aXMbJlXEirUtlp1lBi4t1Hw4K8G6mEly/15108239746754057.gif" alt="">
                </div>
                <p class="nickName toe feb">路人甲</p>
                <p class="description tal">
                    我是<span class="nickName">路人甲</span>，我正在预约<span class="courseTitle">《无间狱插画》</span>中文教程直播课，需要三人支持我，分享给朋友支持你
                </p>
            </div>
            <div class="progressBox">
                <div class="userPicBox pr">
                    <div class="num1 userPic br50 pa">
                        <img class="br50" src="http://img.yxs.shenyecg.com/Image/XsYAuXoIGlEWkkruNBagDcopsdFbkVSm/233.jpg" alt="">
                    </div>
                    <div class="num2 userPic br50 pa">
                        <img class="br50" src="http://img.yxs.shenyecg.com/Image/XsYAuXoIGlEWkkruNBagDcopsdFbkVSm/233.jpg" alt="">
                    </div>
                    <div class="num3 userPic br50 pa dn">
                        <img class="br50" src="http://img.yxs.shenyecg.com/Image/XsYAuXoIGlEWkkruNBagDcopsdFbkVSm/233.jpg" alt="">
                    </div>
                </div>
                <div class="progress pr br5">
                    <p class="record pa br5"></p>
                    <span class="circle num1 br50 pa active"></span>
                    <span class="circle num2 br50 pa active"></span>
                    <span class="circle num3 br50 pa"></span>
                </div>
            </div>
            <div class="follower tal">
                <p class="text">支持Ta的人</p>
                <div class="emptyInfo tac dn">暂无人支持Ta</div>
                <div class="followerList clearfix">
                    <a class="dib fl" href="javascript:void(0);">
                        <img class="br50" src="http://img.yxs.shenyecg.com/Image/XsYAuXoIGlEWkkruNBagDcopsdFbkVSm/233.jpg" alt="">
                        <p class="nickName toe">路人甲</p>
                    </a>
                    <a class="dib fl" href="javascript:void(0);">
                        <img class="br50" src="http://img.yxs.shenyecg.com/Image/aXMbJlXEirUtlp1lBi4t1Hw4K8G6mEly/15108239746754057.gif" alt="">
                        <p class="nickName toe">路人甲</p>
                    </a>
                </div>
            </div>
            <div class="shares clearfix">
                <p class="text fl">获取支持</p>
                <div class="shareWays fl">
                    <div class="bdsharebuttonbox share-ways-button" data-tag="share_1">
                        <a class="br50 bds_tsina" data-cmd="tsina"></a>
                        <a class="br50 bds_weixin" data-cmd="weixin"></a>
                        <a class="br50 bds_sqq" data-cmd="sqq"></a>
                        <a class="br50 bds_qzone" data-cmd="qzone"  style="margin-right:0;"></a>
                    </div>
                </div>
            </div>
            <div class="coupon pr disable">
                <div class="courseMsg tal">
                    <h3 class="courseTitle toe">《无间狱插画》</h3>
                    <p class="timeLimit">2018.4.30-2018.12.30</p>
                </div>
                <a class="db pa tac predict transition" href="javascript:void(0);">预约</a>
            </div>
            <p class="infos">三人支持达成后领取</p>
        </div>
    </div>
    <!--三人组团-->
    <div class="threeGroup dialog showPopup pf dn">
        <p class="del tar"><a href="javascript:void(0);"><i class="fa fa-close"></i></a></p>
        <div class="content tac">
            <h2 class="title feb">三人组团</h2>
            <div class="infos">
                <p class="infos tal ruleTitle">活动规则：</p>
                <p class="infos tal ruleContent">成功邀请三个好友支持后，可获得免费入场券。</p>
            </div>
        </div>
        <div class="shares">
            <p class="text feb tac">立即分享</p>
            <div class="shareWays">
                <div class="bdsharebuttonbox share-ways-button" data-tag="share_1">
                    <a class="br50 bds_tsina" data-cmd="tsina"></a>
                    <a class="br50 bds_weixin" data-cmd="weixin"></a>
                    <a class="br50 bds_sqq" data-cmd="sqq"></a>
                    <a class="br50 bds_qzone" data-cmd="qzone" style="margin-right:0;"></a>
                </div>
            </div>
        </div>
    </div>
    <!--领取成功-->
    <div class="receiveSuccess dialog showPopup pf dn">
        <p class="del tar"><a href="javascript:void(0);"><i class="fa fa-close"></i></a></p>
        <div class="content tac">
            <div class="infos">
                <img src="img/activity/congratulation.png" alt="">
                <p class="text feb">领取成功</p>
                <div class="description tal">
                    您成功领取了 <span class="userName">霍元甲</span> 赠送给您的《无间狱插画》代金券
                </div>
            </div>
            <div class="coupon pr">
                <div class="courseMsg tal">
                    <h3 class="courseTitle toe">《无间狱插画》</h3>
                    <p class="timeLimit">2018.4.30-2018.12.30</p>
                </div>
            </div>
            <div class="btn tac">
                <a class="db br5 confirm transition" href="javascript:void(0);">确认</a>
            </div>
        </div>
    </div>
    <!--三张代金券已赠送完-->
    <div class="couponAway dialog showPopup pf dn">
        <p class="del tar"><a href="javascript:void(0);"><i class="fa fa-close"></i></a></p>
        <div class="content tac">
            <div class="infos">
                <img src="img/activity/congratulation.png" alt="">
                <p class="text feb">《无间狱插画》</p>
                <p class="text feb">三张代金券已赠送完</p>
            </div>
            <div class="instruction">
                <p class="text feb">您获得一张《大狗熊毛发系列制作》代金券</p>
            </div>
            <div class="coupon pr">
                <div class="courseMsg tal">
                    <h3 class="courseTitle toe">《无间狱插画》</h3>
                    <p class="timeLimit">2018.4.30-2018.12.30</p>
                </div>
            </div>
            <div class="btn tac">
                <a class="db br5 confirm transition" href="javascript:void(0);">确认</a>
            </div>
        </div>
    </div>
    <!--领取代金券-->
    <div class="getCoupon dialog showPopup pf dn">
        <p class="del tar"><a href="javascript:void(0);"><i class="fa fa-close"></i></a></p>
        <div class="content tac">
            <div class="infos">
                <img class="br50" src="http://img.yxs.shenyecg.com/Image/XsYAuXoIGlEWkkruNBagDcopsdFbkVSm/233.jpg" alt="">
                <p class="text feb">啦啦啦</p>
            </div>
            <div class="description tal">
                我是啦啦啦，我预约一堂活动课程《无间狱插画》中文教程直播课，现赠送你一张免费活动代金券，可入场免费观看。
            </div>
            <div class="coupon pr">
                <div class="courseMsg tal">
                    <h3 class="courseTitle toe">《无间狱插画》</h3>
                    <p class="timeLimit">2018.4.30-2018.12.30</p>
                </div>
                <a class="db pa tac predict transition" href="javascript:void(0);">领取</a>
            </div>
            <div class="btn tac">
                <a class="db br5 moreCoupon transition" href="javascript:void(0);">更多代金券</a>
            </div>
        </div>
    </div>
    <!--扫描二维码-->
    <div class="wechatCodeDialog dialog showPopup pf dn">
        <p class="del tar"><a href="javascript:void(0);"><i class="fa fa-close"></i></a></p>
        <div class="content tac">
            <img src="img/icons/WeChatCode.jpg" alt="">
            <p class="info feb">扫描二维码关注</p>
            <p class="tips">关注深夜研习社订阅号，每周领取一张代金券</p>
        </div>
    </div>
</body>
<script src="js/jquery.min.js"></script>
<script>
    $(function(){
        //获取使用方法说明
        $(".exchangeCoupon .getHelp").click(function(){
            $(".exchangeCoupon .helpInfo").slideToggle();
        })
    })
</script>
<script>
    window._bd_share_config = {
        common : {
            bdText : '自定义分享内容',
            bdDesc : '自定义分享摘要',
            bdUrl : '自定义分享url地址',
            bdPic : '自定义分享图片'
        },
        share : [{
            "bdSize" : 32
        }]
    };
    with(document)0[(getElementsByTagName('head')[0]||body).appendChild(createElement('script')).src='http://bdimg.share.baidu.com/static/api/js/share.js?cdnversion='+~(-new Date()/36e5)];
</script>
</html>
